const path = require('path')
const { whenProd } = require('@craco/craco')
const CracoLess = require('craco-less')
const CracoAntDesignPlugin = require('craco-antd')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const CompressionPlugin = require('compression-webpack-plugin')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

const vendorOutputDir = 'public/vendor'
const productionGzipExtensions = /\.(js|css|json|txt|html)(\?.*)?$/i

const webpackConfig = {
  plugins: [
    new DllReferencePlugin({
      context: path.join(__dirname),
      // 描述 react 动态链接库的文件内容
      manifest: require(path.resolve(__dirname, vendorOutputDir, 'react.manifest.json')),
    }),
    new AntdDayjsWebpackPlugin(),
    ...whenProd(
      () => [
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 1024,
          minRatio: 0.8,
        }),
        new BundleAnalyzerPlugin(),
      ],
      []
    ),
  ],
}

module.exports = {
  babel: {
    plugins: ['babel-plugin-styled-components', '@babel/plugin-syntax-dynamic-import'],
  },
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      // options: {
      //   customizeTheme: {
      //     '@primary-color': '#1DA57A',
      //   },
      // },
    },
    {
      plugin: CracoLess,
      options: {
        lessLoaderOptions: {
          lessOptions: { javascriptEnabled: true },
        },
      },
    },
  ],
  webpack: smp.wrap(webpackConfig),
  // webpack: webpackConfig,
}
